<template>
  <div class="grey_bg">
    <navigate>查看测评结果</navigate>
    <div class="main_content">
      <div class="tabs_box">
        <div class="tabs_item" @click="selectTab(1)" :class="{ 'is_current': currentTab == 1 }">查看测评结果</div>
        <div class="tabs_item" @click="selectTab(2)" :class="{ 'is_current': currentTab == 2 }">查看答题情况</div>
      </div>
      
      <look-done-result v-show="currentTab == 1"></look-done-result>
      <look-done-statuation v-show="currentTab == 2"></look-done-statuation>
    </div>
  </div>
</template>

<script>
import lookDoneResult from '@/views/core/lookDoneResult.vue';
import lookDoneStatuation from '@/views/core/lookDoneStatuation.vue';
export default {
  data() {
    return {
      currentTab: 1
    };
  },
  computed: {
    // 1新增 2编辑
    calcParamsType() {
      return this.$route.params.type || 1;
    },
    calcParamsId() {
      return this.$route.params.id || 0;
    }
  },
  components: {
    'look-done-result': lookDoneResult,
    'look-done-statuation': lookDoneStatuation,
  },
  methods: {
    selectTab(value) {
      if(this.currentTab == value) return;
      if(this.calcParamsType == 2) {
        return this.$toast.fail("没有权限查看该报告！");
      }
      this.currentTab = value;
    }
  }
  ,
  mounted() {
    if(this.calcParamsType == 2) {
      this.currentTab = 2;
    }
  }
};
</script>

<style scoped>
.grey_bg {
  background: #f4f6fa;
  overflow-y: hidden !important;
}
.main_content {
  height: calc(100% - 60px);
  overflow-y: auto;
  padding: 10.42px;
  box-sizing: border-box;
  display: grid;
  gap: 10.42px;
  align-content: flex-start;
}
.tabs_box {
  width: 340px;
  display: flex;
  margin: 0 auto;
}
.tabs_item {
  width: 170.14px;
  height: 34.72px;
  line-height: 34.72px;
  background: #ffffff;
  font-size: 15.28px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: center;
  color: #333333;
}
.tabs_item:nth-child(1) {
  border-radius: 6.94px 0 0 6.94px;
}

.tabs_item:nth-child(2) {
  border-radius: 0 6.94px 6.94px 0;
}
.is_current {
  font-size: 15.28px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  color: #ffffff;
  width: 170.14px;
  height: 34.72px;
  background: linear-gradient(0deg, #ffffff -90%, rgba(255, 255, 255, 0) 100%),
    #0aa7f4;
}
</style>